<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			vue：
				创建：
					2.0
						vue init webpack 项目名字
						如果仍然使用旧版2.0，可以vue-cli@2.x webpack 项目名字
					3.0
						构建vue3，先npm uninstall vue-cli -g
						再安装npm(cnpm) install -g @vue/cli
						之后vue create 项目名（不能驼峰），命令行构建项目
						出现pick a preset的时候，选第三个，会出现选项，点击空格选上router
						之后出现eslint选项，用第四个，下一步，再下一步，选第二个package
						Save this as a preset for future projects选no
						关闭eslint可以试着在package里面关闭
						如果出现关闭eslint重新安装module出现Cannot find module 'vue-loader-v16/package.json'
						npm uninstall vue-loader-v16
						再npm i vue-loader-v16
						然后项目根目录新建vue.config.js，在里面添加
						module.exports = {
						  lintOnSave: false,
						  devServer: {
							  overlay: {
								  warning: false,
								  errors: false
							  }
						  }
						}
				路由：
					router里面的index.js里面
					import组件进来
					{
						path:'/xxxxx',
						components:组件变量,
						children:[
							{
								path:'xxxxx',
								components:组件变量
							}
						]
					}
					路由传值可以通过query传值，也可以直接在路由定义变量比如，'/xxx/:xxx'，两者二选一
					跳转：$router.push('/xxx')，子路由：$router.push('/xxx/xxx')
					uniapp就是uni.navigateTo('/pages/xxx')，跟小程序一样，因为uniapp内部是vue，所以放在这里对比
			
			
			
			react：
				16-17版本
					$ cnpm install -g create-react-app
					$ create-react-app my-app
					$ cd my-app/
					
					要修改端口：在node_modules文件夹里的可以看到react-scripts文件夹，在start.js里可以找到修改端口的代码
					
					$ npm start
					
					如果要eject，事先进行eject，避免后面经常报错，
					一开始也不能eject的话，就先用git处理下，git init ，git add . ，git commit -m 'init'，别管，只管做就行，
					eject完就把git文件夹删掉就行
				路由：
				 
					 //-----
				 
					 npm install react-router-dom --save
					 npm install --save react-router-config//新版v6 - react-router-dom取消了react-router-config
					 npm install --save history//助于js操作页面跳转，v5的，跳转已集成到react-router-dom
					 路由js引入import React from 'react';
						 配置routes数组，跟vue一样的结构
						 例：
						 //v5版======================
						 _router = [{
							component:ar(() => import('./index/index.js')),//懒加载，不懒加载的话先import进来
							path:'/',
							exact: true
						 },{
							component:ar(() => import('./index/index.js')),
							path:'/index'
						},{
							component:ar(() => import('./index1/index.js')),
							path:'/page2',
						 }]
						 //v6版（懒加载做如下处理，component改成element）======================
						 比如const Home = React.lazy(() => import('../views/home/home.js'))
						 然后element那里改成<React.Suspense fallback={''}><Home/></React.Suspense>
					 组件页面引入如下：
						 //v5引入======================
						 import {
							 HashRouter as Router,//BrowserRouter为正常url模式，不过不会配置最好不要使用，js跳转配置麻烦
							 Route,
							 Link，
							 Switch,
							 Redirect,
							 withRouter，
						 }from 'react-router-dom';        
						 import { renderRoutes } from 'react-router-config';新版v6 - react-router-dom没有switch，这个会报错
						 import { createBrowserHistory } from 'history';
						 【//新版v6引入======================
						  import {
								HashRouter as Router,
								Routes,
								Route,
								useRoutes,
								Navigate ,
								Link,
								Outlet,
								useNavigate 
						} from "react-router-dom";//新版v6没有switch】
						 //
						 页面组件该怎么写就怎么写，跳转就使用<Link to="路径">文本</Link>进行跳转
					视图组件的根元素必须是router标签，一般只保留如下代码结构（特殊情况另外处理）:
							 <Router>
								 {renderRoutes(封装的路由js)}//v6新版改为：useRoutes，且只能在另外的构造函数使用，直接return出来，然后把该构造函数放进Router使用
								 或者下面那样
								 //v5版======================
								 <Switch>                    
									 <Route path=‘路径’ component={只能当前页面引入组件}>
										 <Redirect to='重定向过去的路径'/>(非必要)
									 </Route>
								 </Switch>
								 //v6版======================
								  <Routes>                    
									 <Route path=‘路径’ element={只能当前页面引入组件，如果要重定向，直接在这里改为<Navigate to='重定向过去的路径'/>(非必要)}>
										直接在这里写Route来嵌套
									</Route>
								 </Routes>
								 //如果useRoutes里面需要重定向的，暂时用上面的写法代替重定向
								 //域名重定向到首页的时候上面的Route结构都还是需要用到的，route加个属性exact，表示当前路径只显示当前路径组件内容
							 </Router>
					 子路由：
						//v5版=============================================
						 在state里面加上：route:props.route,前提是state对象在constructor里面,
						 页面里面加入{renderRoutes(this.state.route.children)}这个入口,
						 父级路由不能有exact对象
						 //v6版=============================================
						 页面引入并使用Outlet，<Outlet/>，
						 在路由封装里面，children里面优先显示的，把path改为{index:true}
					 js实现页面跳转：
						 //v5版======================
						 historys = createHashHistory()
						 函数里面historys.push('路径'),因为不允许添加相同的path，所以推荐使用window.location.hash代替
					 传值只能query传值现在，目前没找到其他方法传值
					 	 替换：historys.replace('路径')
						 //v6版======================
						 navigate = useNavigate()
						 函数里面navigate('路径'),因为不允许添加相同的path，所以推荐使用window.location.hash代替
						 replace：navigate('路径',{replace:true})
					 传值只能query传值现在，目前没找到其他方法传值
			
			小程序：
				创建：
					开发者工具那里创建
				路由：
					页面文件夹路径就是跳转路径，在pages:[]里面
					因为一般会出现多次跳下一页的情况出现，所以要封装跳转
					传值只能query传值，然后onLoad钩子里面接收
		 -->
	</body>
</html>
